<template>
  <!-- Tba栏 -->
  <q-tabs align="left" dense inline-label>
    <transition-group name="tab-list">
      <q-route-tab to="/" class="q-px-xs" :key="layout.mainPage.id">
        <q-icon :name="layout.mainPage.icon" size="1.2rem" />
        <div class="q-mx-sm">{{ layout.mainPage.name }}</div>
      </q-route-tab>
      <q-route-tab
        :to="layout.toBind(item)"
        class="q-px-xs"
        v-for="item in layout.tabList"
        :key="item.id"
      >
        <q-icon v-if="item.icon" :name="item.icon" size="1.2rem" />
        <div class="q-mx-sm">{{ item.name }}</div>
        <div @click.prevent.stop="closeThis(item)">
          <q-icon name="close" size="1.2rem" class="remove-icon" />
          <q-tooltip> 移除一个标签 </q-tooltip>
        </div>
        <q-menu touch-position context-menu>
          <q-list dense>
            <q-item clickable v-close-popup @click="closeThis(item)">
              <q-item-section>移除当前</q-item-section>
            </q-item>
            <q-item clickable v-close-popup @click="closeLeft(item)">
              <q-item-section>关闭左侧</q-item-section>
            </q-item>
            <q-item clickable v-close-popup @click="closeRight(item)">
              <q-item-section>关闭右侧</q-item-section>
            </q-item>
            <q-item clickable v-close-popup @click="closeAll()">
              <q-item-section>移除全部</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-route-tab>
    </transition-group>
  </q-tabs>
</template>

<script setup lang="ts">
import { useLayoutStore } from 'src/stores/layout-store';
import { useRoute, useRouter } from 'vue-router';
const layout = useLayoutStore();
const router = useRouter();
const route = useRoute();

// 关闭当前
const closeThis = (item: WJ.MenuItem) => {
  let tabl = layout.tabList.slice(0);
  const it = tabl[tabl.indexOf(item) - 1];
  tabl = tabl.filter((i) => i.id !== item.id);
  // 如果移除的是当前路由
  if (
    route.query.url
      ? route.query.url === item.path
      : route.fullPath === item.path
  ) {
    if (it) {
      router.push(layout.toBind(it)).then(() => {
        layout.tabList = tabl;
      });
    } else {
      router.push({ path: layout.mainPage.path }).then(() => {
        layout.tabList = tabl;
      });
    }
  } else {
    layout.tabList = tabl;
  }
};
// 关闭左侧
const closeLeft = (item: WJ.MenuItem) => {
  let tabl = layout.tabList.slice(0);
  const index = tabl.indexOf(item);
  if (index !== 0) {
    tabl = tabl.slice(tabl.indexOf(item));
    if (
      route.query.url
        ? route.query.url !== item.path
        : route.fullPath !== item.path
    ) {
      router.push(layout.toBind(item)).then(() => {
        layout.tabList = tabl;
      });
    } else {
      layout.tabList = tabl;
    }
  }
};
// 关闭右侧
const closeRight = (item: WJ.MenuItem) => {
  let tabl = layout.tabList.slice(0);
  const index = tabl.indexOf(item) + 1;
  if (index !== tabl.length) {
    tabl = tabl.slice(0, index);
    if (
      route.query.url
        ? route.query.url !== item.path
        : route.fullPath !== item.path
    ) {
      router.push(layout.toBind(item)).then(() => {
        layout.tabList = tabl;
      });
    } else {
      layout.tabList = tabl;
    }
  }
};
// 全部关闭
const closeAll = () => {
  router.push({ path: layout.mainPage.path }).then(() => {
    layout.tabList = [];
  });
};
</script>

<style lang="scss" scoped>
.remove-icon {
  opacity: 0.58;
  transition: all 0.3s;
  &:hover {
    opacity: 1;
  }
}
.tab-list {
  /* 对移动中的元素应用的过渡 */
  &-move,
  &-enter-active,
  &-leave-active {
    transition: all 0.5s ease;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
  &-leave-active {
    position: absolute;
  }
}
</style>
